import React from 'react';
import { Text, View } from 'react-native';
import Progress from './Progress';
import Button from '../button/Button'
import ProgressWithImage from "./ProgressWithImage";

export default class ProgressDemo extends React.Component{
  constructor(props: any) {
    super(props);
    this.state = {
      percent: 40,
    };
  }

  onAdd = () => {
    let p = this.state.percent + 100/30;
    if (this.state.percent >= 100) {
      p = 0;
    }
    this.setState({ percent: p });
  }

  render() {
    const style = {
      marginTop: 80,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    };
    return (
      <View>
        <Progress percent={90} position="fixed" />
        <View style={style }>
          <View style={{ marginRight: 10, height: 4, flex: 1 }}>
            <Progress percent={this.state.percent} />
          </View>
          <Text>{this.state.percent}%</Text>
        </View>

        <ProgressWithImage percent={this.state.percent} />

        <Button
          style={{ width: 50, marginLeft: 10 }}
          type="ghost"
          size="small"
          onClick={this.onAdd}
        >
          (+-)10
        </Button>

        <Progress percent={5} />
      </View>
    );
  }
}
